<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车-小米有品</title>
    <link rel="stylesheet" href="./css/shopcart.css">
</head>
<body>
    <div class="mask"></div>
    <!-- top -->
    <div class="top">
        <div class="top-main">
            <ul>
                <li>
                    <a href="###" id="top-login">登录</a>
                    &nbsp;
                    <a href="###" id="top-register">注册</a>
                </li>
                <li>
                    |
                </li>
                <li>
                    <a href="###">帮助中心</a>
                </li>
                <li>
                    |
                </li>
                <li>
                    <a href="###">下载APP</a>
                </li>
                <li>
                    |
                </li>
                <li id="li-last">
                    <a href="###">资质证照 / 协议规则</a>
                </li>
            </ul>
            <div class="li-menu">
                <span>资质证照</span>
                <span>协议规则</span>
            </div>
        </div>

        <!-- 点击注册出现遮罩层 -->
        <div class="top-mask">
            <span class="span-close"></span>

            <h3>声明与政策</h3>
            <p>
                欢迎您来到小米有品！
            </p>
            <p>
                我们依据最新法律法规要求，制定并更新了
                <a href="###">《隐私政策》</a>、
                <a href="###">《小米有品用户协议》</a>
                以及
                <a href="###">《小米账号使用协议》</a>。
                <br>
                您需阅读并同意相关政策条款方可进行登录。
            </p>
            <a href="###" class="mask-btn mask-btn1"> <em></em> 同意并继续</a>
            <a href="###" class="mask-btn mask-btn2">不同意</a>
        </div>
    </div>

    <!-- header -->
    <div class="header">
        <div class="header-main">
            <div class="header-logo"><a href="index.html" target="_black"></a></div>
            <ul class="header-nav">
                <li>
                    <a href="###">限时抢购</a>
                </li>
                <li>
                    <a href="###">企业采购</a>
                </li>
            </ul>

            <form action="javascript:void(0)" class="search">
                <input type="text" id="header-input" placeholder="搜一搜" autocomplete="off">
                <a href="###"></a>
            </form>
            <div class="shopcar">
                <a href="###"></a>
            </div>
        </div>
    </div>

    <!-- box -->
    <div id="main">
        <div class="container">
            <div id="cart">
                <form action="javascript:void(0)">
                    <table class="form">
                        <thead>
                            <tr>
                                <th width="8%">选择</th>
                                <th width="50%">商品</th>
                                <th width="13%">单价（元）</th>
                                <th width="15%">数量</th>
                                <th width="14%">金额（元）</th>
                            </tr>
                        </thead>
                        <tbody id="cart-goods-list">
                            <tr>
                                <td>
                                    <input type="checkbox" name="good-id" value="1">
                                </td>
                                <td class="goods">
                                    <div class="goods-image">
                                        <img src="https://img.youpin.mi-img.com/shopmain/c096f9d00d39ed12c6365cea8f3d6c0d.png@base@tag=imgScale&F=webp&h=800&w=800?w=800&h=800">
                                    </div>
                                    <div class="goods-information">
                                        <h3>Dior 迪奥 花漾甜心小姐 女士淡香水</h3>
                                        <ul>
                                            <li>不支持7天无理由退货</li>
                                        </ul>
                                    </div>
                                </td>
                                <td>
                                    <span class="price">￥<em class="price-em">498.00</em></span>
                                </td>
                                <td>
                                    <div class="combo">
                                        <input type="button" name="minus" value="-" class="combo-minus">
                                        <input type="text" name="count" value="1" class="combo-value">
                                        <input type="button" name="plus" value="+" class="combo-plus">
                                    </div>
                                </td>
                                <td>
                                    <strong class="amount">￥<em class="amount-em">498.00</em></strong>
                                </td>
                            </tr>

                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    <label>
                                        <input type="checkbox" name="all">
                                        <span>全选</span>
                                    </label>
                                    <a href="#" id="cart-delete">删除</a>
                                </td>
                                <td colspan="3">
                                    <span>合计：</span>
                                    <strong id="total-amount">￥<em id="total-amount-em">0.00</em></strong>
                                    <input type="submit" value="立即结算" id="settlement">
                                    <div id="pay">
                                        <button id="shut">X</button>
                                        <img src="./images/weixin.png" alt="">
                                        <img src="./images/zhifubao.jpg" alt="">
                                    </div>
                                </td>
                            </tr>
                        </tfoot>

                    </table>
                </form>
            </div>
        </div>
    </div>




    <!-- <div class="box">
        <div class="container">
                <div class="con-top">
                    <p><a href="index.html">首页</a> > 购物车</p>
                </div>
                <div class="goods-main">
                <div class="con-main">
                    <div class="cart-main"></div>
                    <div class="cart-word">
                        <p>购物车里空空如也，快去选购心仪的商品吧</p>
                    </div>
                    <div class="toindex">
                        <a href="./index.html">去首页</a>
                    </div>
                </div>
            </div>  
        </div>
    </div> -->


<!--footer 底部  -->
<div class="footers">
    <div class="footer-main">
        <div class="footer-left">
            <img src="https://www.xiaomiyoupin.com/static3/media/logo@2x.cf8cc6a8.png" alt="">
        </div>

        <div class="footer-right">
            <p>
                ©xiaomiyoupin.com 苏B2-20180351 苏ICP备18025642号-1
                <img src="https://www.xiaomiyoupin.com/static3/media/record-icon.d0289dc0.png" alt="">
                <a href="###">
                    苏公网安备 32010502010244号
                </a>
            </p>
            <p>
                企业名称：有品信息科技有限公司
                <a href="###">
                    关于我们 
                </a>
                <a href="###">
                    入驻有品
                </a>
                <a href="###">
                    知识产权侵权投诉
                </a>
            </p>
            <p>
                <a href="###">
                    小米有品平台运营主体变更公告
                </a>
            </p>
            <p>
                南京市建邺区白龙江东街8号3栋9层
            </p>
            <img class="pic" src="https://www.xiaomiyoupin.com/static3/media/f-logo.c6285587.png" alt="">
        </div>
    </div>
</div>
</body>
<script src="./libs/jQuery.js"></script>
<script src="./javascripts/shopcart.js"></script>
</html>